<template>
<div>
    <div class="card" style="margin-bottom: 5px;">
    <el-input style="width:240px;margin-right: 10px;" v-model="data.name" :placeholder="请输入姓名搜索查询" :prefix-icon="Search"></el-input>
    <el-button type="primary" @click="search" >查 询</el-button>
    <el-button type="primary" @click="reset">重 置</el-button>
    <el-button type="primary" @click="handleAdd">新 增</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
    <el-table :data="data.members" stripe>
    <el-table-column prop="studentId" label="学号"  />
    <el-table-column prop="name" label="姓名"  />
    <el-table-column prop="sex" label="性别"  />
    <el-table-column prop="position" label="职位" />
    <el-table-column fixed="right" label="操作" min-width="80">
      <template #default="scope">
        <el-button link type="primary" size="small" :icon="Edit" @click="handleUpdate(scope.row)">修 改</el-button>
        <el-button link type="primary" size="small"  :icon="Delete" @click="del(scope.row.id)">删 除</el-button>
      </template>
    </el-table-column>    
        </el-table>
        <div style="margin-bottom: 15px;">
       <el-pagination
       @size-change="load"
       @current-change="load"
       v-model:current-page="data.page"
       v-model:page-size="data.pageSize"
       :page-sizes="[5,10,15,20]"
       background
       layout="total,sizes,prev, pager, next,jumper"
       :total="data.total"
       />
        </div>
    </div>
    <el-dialog  title="成员信息" v-model="data.formVisible" width="500">
    <el-form :model="data.form" style="padding-right: 40px;padding-top: 20px;">
      <el-form-item label="学号" label-width="80px">
        <el-input v-model="data.form.studentId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" label-width="80px">
        <el-input v-model="data.form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" label-width="80px">
        <el-input v-model="data.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" label-width="80px">
        <el-radio-group v-model="data.form.sex">
        <el-radio value="男" label="男"></el-radio>
        <el-radio value="女" label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="职位" label-width="80px">
        <el-input v-model="data.form.position" autocomplete="off" />
      </el-form-item>
      <el-form-item label="工作细则" type="textatea" :rows="3" label-width="80px">
        <el-input v-model="data.form.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<script setup>
import { reactive } from 'vue';
import {Search,Edit,Delete} from "@element-plus/icons-vue";
import request from '../utils/request';
import { ElMessage } from 'element-plus';

console.log(sessionStorage.getItem('token'))
const data=reactive({
    name:null,
    members:[],
    pageNum:1,
    pageSize:10,
    total:0,
    formVisible:false,
    form:{}
})
//const load分页\查询接口
const load=()=>{

    request({
                url: "/user/getUsers",
                method: "get",
                headers: {
                    "Content-Type": "application/json"
                },
                params:{
          pageNum:data.pageNum,
          pageSize:data.pageSize,
    }
            }).then(res =>{
              console.log(res.data)
              data.members=res.data
              data.total = data.members.length
            })
}
load()
// 重置接口：
const reset=()=>{
   data.name=null
   load()
 }

// const save=()=>{}做两个操作：一个新增保存，一个编辑
const save=()=>{



 data.form.id?update():add()

  }
  const add = () => {  
    request({
            url: "/user/addUser",
            method: "post",
            headers: {
                "Content-Type": "application/json"
            },
            data:{
              studentId:data.form.studentId,
              password:data.form.password,
              name:data.form.name,
              sex:data.form.sex,
              position:data.form.position,
              description:data.form.description,
}
        }).then(res =>{
          console.log(res.data)
          load()
        })
        data.formVisible = false
};  

const update=()=>{
  request({
            url: "/user/updateUserInfo",
            method: "put",
            headers: {
                "Content-Type": "application/json"
            },
            data:{
              id:data.form.id,
              studentId:data.form.studentId,
              password:data.form.password,
              name:data.form.name,
              sex:data.form.sex,
              position:data.form.position,
              description:data.form.description,
}
        }).then(res =>{
          console.log(res.data)
          load()
        })
        data.formVisible = false
}

const handleAdd=()=>{
  data.formVisible=true,
  data.form={}
}


const handleUpdate=(row)=>{
data.form=JSON.parse(JSON.stringify(row))//深拷贝就不会影响行对象
data.formVisible=true
}

// const detel=(id)=>{} 删除接口哦
const del = (id) => {  
  request({
            url: "/user/delUserById",
            method: "delete",
            headers: {
                "Content-Type": "application/json"
            },
            params:{
              Id:id
}
        }).then(res =>{
          load()
        })
};  


// 条件查询
const search=()=>{

request({
            url: "/user/getUserByParam",
            method: "get",
            headers: {
                "Content-Type": "application/json"
            },
            params:{
                name:data.name
}
        }).then(res =>{
          console.log(res.data)
          data.members=res.data
        })
}

</script>

<style scoped>
.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(194,176,231,1);
}
</style>
